<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主机监控</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="/show/getjson/t/{$t}"></script>
</head>
<body>
<div style="width:1920px;height:1080px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
    //  标注点数组
    /*var BASEDATA = [
            {title:"202.106.0.20",content:"北京西单机房",point:"116.496024|39.976864",isOpen:1,icon:{w:21,h:21,l:44,t:22,x:0,lb:5}}
         ]
    */     
    //创建和初始化地图函数：
    jsonicon = {w:21,h:21,l:44,t:22,x:0,lb:5};
    function initMap(){
        window.map = new BMap.Map("container");
        map.centerAndZoom(new BMap.Point(106.412318,35.887037),6);
        //map.enableScrollWheelZoom();
        //map.addControl(new BMap.NavigationControl());
        addMarker(hosts );//向地图中添加marker
    }
    
    //创建marker
    window.addMarker = function (data){
        map.clearOverlays();
        for(var i=0;i<data.length;i++){
            var json = data[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(jsonicon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(jsonicon.lb-jsonicon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });

            (function(){
    var _json = json;
    var _iw = createInfoWindow(_json);
    var _marker = marker;
    _marker.addEventListener("click",function(){
        this.openInfoWindow(_iw);
       });
       _iw.addEventListener("open",function(){
        _marker.getLabel().hide();
       })
       _iw.addEventListener("close",function(){
        _marker.getLabel().show();
       })
    label.addEventListener("click",function(){
        _marker.openInfoWindow(_iw);
       })
    if(!!json.isOpen){
     label.hide();
     _marker.openInfoWindow(_iw);
    }
   })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(json){
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowAnchor:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    initMap();//创建和初始化地图
</script>